<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器标签</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
<!--
div:块级元素容器，自带换行
-->
<div style="width: 200px;height: 200px;border: 1px solid red; color:red;">
  <h1>这是标题</h1>
  <marquee>这是滚动内容</marquee>
</div>
<!--css的绝对定位:position: absolute-->
<div style="width: 202px;height: 202px;background: green;position: absolute;left: 202px;top: 0px;">第2个div</div>
<div>第三个div</div>
<hr>
<!--
span:行级元素容器
无法设置宽高
-->
<span style="width: 300px;height: 200px;border: 1px solid red; color:green;">
  <font>这是字体</font>
  <h1>这是标题</h1>
  </span>
<span>第二个span</span>
<span>第三个span</span>
</body>
</html>